<template>
  <div class="full">
    <div style="width:  calc(100vw - 340px);height: calc(100vh - 344px);display: flex;">
      <div v-for="i in size">
        <div v-for="j in size" :style="{width: `calc((100vw - 340px)/${size})`, height:`calc((100vh - 344px)/${size})`}"
             style="padding: 4px;background: black; border:1px solid white;display: flex;align-items: center;justify-content: space-around;">
          <div :style="{width:`min(calc((100vw - 340px)/${size}),calc((100vh - 344px)/${size} * 1.7777))`}" style="position:relative;">
            <video-player :options="playerOptions" :src="'/api/video/'+path"></video-player>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="VideoDetailView" lang="ts">

import {onBeforeUnmount, onMounted, ref} from "vue";
import 'video.js/dist/video-js.css'

import {VideoPlayer} from "@videojs-player/vue";
import VideoApi from "@/axios/VideoApi";
import {useRoute} from "vue-router";

// 1、4、9、16、25、36、64
// 1、2、3、4、5、6、8
const size = ref(1);
const path = ref('')
const route = useRoute()
let id: number = 0;

onBeforeUnmount(() => {
  id && clearInterval(id)
  id = 0
})

onMounted(() => {
  VideoApi.get(Number(route.query.id)).then(resp => {
    path.value = resp.data?.path + ""
  })
});
const playerOptions = ref({
  playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  autoplay: false, // 如果true,浏览器准备好时开始回放。
  muted: true, // 默认情况下将会消除任何音频。
  loop: true, // 导致视频一结束就重新开始。
  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: 'zh-CN',
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  fill: true,
  notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controls: true,
  responsive: true,
  aspectRatio: "16:9",
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true // 全屏按钮
  }
})

</script>

<style lang="less" scoped>
.full {
  display: flex;
  width: calc(100vw - 240px);
  height: calc(100vh - 244px);
  align-items: center;
  justify-content: space-around;
}
</style>